
        window.onload = () => {
            const app = document.getElementById("app");
            app.innerHTML = `<div>
        <canvas id="canvas"></canvas>
    </div>`
            const fontSize = 20;
const getClums = () => {
    const clums = Math.floor(window.innerWidth / fontSize);
    return clums;
}
const nextChar = new Array(getClums()).fill(0)
const getChars = () => {
    return String.fromCharCode(Math.floor(Math.random() * 90 + 32))
}
const getColors = () => {
    let colors = [
        '#455',
        '#234',
        '#457',
        '#890',
        '#f78'
    ];
    return colors[Math.floor(Math.random() * colors.length)]
}
const draw = (ctx) => {
    ctx.fillStyle = "rgba(0,0,0,0.2)"
    ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
    const clums = getClums(fontSize);
    for (let i = 0; i < clums; i++) {
        const x = i * fontSize;
        const y = (nextChar[i] + 1) * fontSize;
        if (y > window.innerHeight && Math.random() > 0.99) {
            nextChar[i] = 0;
        }
        const char = getChars();
        ctx.font = "20px serif";
        ctx.fillStyle = getColors()
        ctx.fillText(char, x, y);
        nextChar[i]++
    }
}


const demo = () => {
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.background = "#000";
    const context = canvas.getContext("2d")
    let nextChar = new Array(getClums()).fill(0);

    setInterval(() => {
        draw(context, nextChar);
    }, 100)

    // window.addEventListener('resize', () => {
    //     canvas.width = window.innerWidth;
    //     canvas.height = window.innerHeight;
    //     // context.clearRect(window.innerWidth,window.innerHeight);
    //     nextChar = new Array(getClums()).fill(0);
    //     draw(context)
    // });
}
demo()
        }
        